/***********************************************************************************
 * X2Engine Open Source Edition is a customer relationship management program developed by
 * X2 Engine, Inc. Copyright (C) 2011-2019 X2 Engine Inc.
 * 
 * This program is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License version 3 as published by the
 * Free Software Foundation with the addition of the following permission added
 * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
 * IN WHICH THE COPYRIGHT IS OWNED BY X2ENGINE, X2ENGINE DISCLAIMS THE WARRANTY
 * OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
 * 
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
 * details.
 * 
 * You should have received a copy of the GNU Affero General Public License along with
 * this program; if not, see http://www.gnu.org/licenses or write to the Free
 * Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
 * 02110-1301 USA.
 * 
 * You can contact X2Engine, Inc. P.O. Box 610121, Redwood City,
 * California 94061, USA. or at email address contact@x2engine.com.
 * 
 * The interactive user interfaces in modified source and object code versions
 * of this program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU Affero General Public License version 3.
 * 
 * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
 * these Appropriate Legal Notices must retain the display of the "Powered by
 * X2 Engine" logo. If the display of the logo is not reasonably feasible for
 * technical reasons, the Appropriate Legal Notices must display the words
 * "Powered by X2 Engine".
 **********************************************************************************/




@import "colors";

.dropdown {
    position: relative;
}

#profile-dropdown > ul {
    left: -60px;
}

#more-menu.dropdown > ul {
    left: 3px;
    &:after {
        left: 15px;
    }
}

#module-action-menu.dropdown > ul {
    left: 3px;
    &:after {
        left: 15px;
    }
}

.dropdown ul {
    visibility: hidden;
    position: absolute;
    z-index: 1000;
    top: 29px;
    padding: 2px;
    background: white;
    opacity: 1;
    -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    
    @include border-radius (2px);
}

#user-menu .dropdown ul {
    left: auto;
    right: 0;
}

.dropdown ul {
    &.open {
        visibility: visible;
    }
    &:after {
        position: absolute;
        z-index: 1500;
        top: -6px;
        left: 98px;
        display: inline-block;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        border-bottom: 6px solid white;
        content: '';
        pointer-events:none;
    }
}

#user-menu .dropdown ul:after {
    left: auto;
    right: 20px;
    background: white;
}

.dropdown {
    ul li {
        white-space: nowrap;
        height: auto;
        text-shadow: none;
        min-width: 120px;
        font-size: 12px;
        float: none;
        padding: 0;
        &:first-child {
            @include border-radius (2px 2px 0 0);
        }
        &:last-child {
            @include border-radius (0 0 2px 2px);
        }
        &:only-child {
            @include border-radius (2px);
        }
        &.divider {
            border-top: 1px solid #ccc;
            height: 0;
            margin: 2px 5px;
            span {
                display: none;
            }
        }
        a, span {
            display: block;
            padding: 0 20px;
            height: auto;
        }
        a {
            font-weight: normal;
            color: #555555 !important;
            font-size: 15px;
            line-height: 25px;
            text-shadow: none;
        }
    }
    &:hover ul li:hover {
        background-color: $lightBabyBlue;
        
        a {
            text-decoration: none;
        }
    }
    li.active {
        background: $lightBabyBlue;
        border: none;
    }
}

#profile-dropdown {
    padding: 0;
    margin-left: -5px;
    z-index: 1;
    margin-top: 2px;
    span {
        height: auto;
        margin: 0 8px 0 0;
        padding-left: 6px;
    }
    img, i{
        margin: -2px 5px 0 -2px;
        @include border-radius (3px);
        vertical-align: middle;
    }
    i {
        margin-right: 0px;
    }
}

/* End Dropdown Menu */

/* Widget Dropdown Menu */

#widget-dropdown {
    > span {
        background: none;
        float: left;
    }
    ul:after {
        position: absolute;
        z-index: 1500;
        top: -6px;
        left: 4px;
        display: inline-block;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #f6f6f6;
        border-left: 6px solid transparent;
        content: '';
    }
}
